<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>超级会员支付</title>
  <link rel="stylesheet" href="framework/font-awesome-4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="framework/reset.css">
  <link rel="stylesheet" href="css/payment.css">
  <style>
    .payment-type li {
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 4vw;
      box-sizing: border-box;
    }
    .payment-type label {
      display: flex;
      align-items: center;
      font-size: 4vw;
      color: #333;
      width: 100%;
    }
    .payment-type img {
      width: 10vw;
      height: auto;
      margin-right: 3vw;
    }
    .payment-type input[type="radio"] {
      transform: scale(1.5);
      margin-right: 10px;
      accent-color: #38CA73;
    }

    .payment-button {
      width: 100%;
      box-sizing: border-box;
      padding: 4vw;
      display: flex;
      flex-direction: column;
      gap: 3vw;
    }
    .payment-button button {
      width: 100%;
      height: 10vw;
      border: none;
      outline: none;
      border-radius: 4px;
      font-size: 4vw;
      font-weight: bold;
      transition: background-color 0.3s;
    }
    .payment-button .pay-btn {
      background-color: #38CA73;
      color: white;
    }
    .payment-button .pay-btn:hover {
      background-color: #2ca25f;
    }

    .payment-button .back-btn {
      background-color: #0097FF;
      color: white;
    }
    .payment-button .back-btn:hover {
      background-color: #0074cc;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <header>超级会员支付</header>

    <h3>订单信息</h3>
    <div class="order-info">
      <p id="orderId">订单号：</p>
      <p id="orderTime">下单时间：</p>
    </div>

    <h3>会员项目</h3>
    <ul class="order-detailet">
      <li>
        <p>超级会员（30天）</p>
        <p>¥9.90</p>
      </li>
    </ul>

    <h3>支付方式</h3>
    <ul class="payment-type">
      <li>
        <label>
          <input type="radio" name="payMethod" value="alipay" checked>
          <img src="img/alipay.png" alt="支付宝"> 支付宝
        </label>
      </li>
      <li>
        <label>
          <input type="radio" name="payMethod" value="wechat">
          <img src="img/wechat.png" alt="微信支付"> 微信支付
        </label>
      </li>
    </ul>

    <div class="payment-button">
      <button class="pay-btn" onclick="pay()">确认支付</button>
      <button class="back-btn" onclick="location.href='index.html'">返回首页</button>
    </div>
  </div>

  <script>
    // 生成订单号
    function generateOrderId() {
      const now = new Date();
      const timestamp = now.getFullYear().toString()
        + (now.getMonth() + 1).toString().padStart(2, '0')
        + now.getDate().toString().padStart(2, '0')
        + now.getHours().toString().padStart(2, '0')
        + now.getMinutes().toString().padStart(2, '0')
        + now.getSeconds().toString().padStart(2, '0');
      const random = Math.floor(Math.random() * 900 + 100); // 三位随机数
      return "VIP" + timestamp + random;
    }

    // 初始化
    const orderId = generateOrderId();
    document.getElementById("orderId").innerText = "订单号：" + orderId;
    document.getElementById("orderTime").innerText = "下单时间：" + new Date().toLocaleString();

    // 支付逻辑
    function pay() {
      const selected = document.querySelector('input[name="payMethod"]:checked').value;
      alert("订单 " + orderId + " 已通过 " + (selected === 'alipay' ? '支付宝' : '微信支付') + " 成功付款！");
      location.href = "index.html";
    }
  </script>
</body>
</html>
